<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="./layui-v2.2.5/css/layui.css"/>
    <script src="./layui-v2.2.5/layui.js"></script>
</head>
<body class="layui-layout-body" style="overflow-y:auto;background-color:#eee">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="position: fixed;
    opacity: 0.8;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href=""></a></li>
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <div class="layui-bg-gray">
        <div class="layui-carousel" id="lunbo">
            <div carousel-item="">
                <div><img
                        style="width: 100%;height:550px;"
                        src="https://www.lejiapay.com/lejiapay/static/images/banner/anquangaoxiao.jpg"></div>
                <div><img style="width: 100%;height:550px;"
                        src="https://www.lejiapay.com/lejiapay/static/images/banner/hangyedingzhi.jpg"></div>
                <div><img style="width: 100%;height:550px;"
                        src="https://www.lejiapay.com/lejiapay/static/images/banner/saomazhifu.jpg"></div>
                <div><img style="width: 100%;height:550px;"
                        src="https://www.lejiapay.com/lejiapay/static/images/banner/yijianzhifu.jpg"></div>
            </div>
        </div>
    </div>
    <div class="layui-container" >
        <div style="padding: 20px;display:flex;flex-direction:row;justify-content: space-around;" >
            <div class="layui-card" style="min-height: 180px;width: 30%;max-height: 500px;border: #d2d2d2 solid 1px;">
                <div class="layui-card-body">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>返璞归真</legend>
                        <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
                    </fieldset>
                </div>
            </div>
            <div class="layui-card" style="min-height: 180px;width: 30%;max-height: 500px;border: #d2d2d2 solid 1px;">
                <div class="layui-card-body">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>返璞归真</legend>
                        <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
                    </fieldset>
                </div>
            </div>
            <div class="layui-card" style="min-height: 180px;width: 30%;max-height: 500px;border: #d2d2d2 solid 1px;">
                <div class="layui-card-body">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>返璞归真</legend>
                        <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-container" style="text-align: center"><hr style="width: 100%;"></div>

</div>

<div class="footer">
        <p>© 2020 <a href="/">layui.com</a> MIT license</p>
        <p>
            <a href="http://fly.layui.com/case/2020/" target="_blank">案例</a>
            <a href="http://fly.layui.com/jie/3147/" target="_blank">支持</a>
            <!--<a href="javascript:;" site-event="contactInfo">联系</a>-->
            <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
            <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
            <a href="http://fly.layui.com/jie/2461/" target="_blank" class="layui-hide-xs">公众号</a>
            <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">赣ICP备13006272号-2</a>
        </p>
        <div class="site-union">
            <p class="site-union-desc">
                <span>
                  感谢以下平台提供云加速支持
                </span>
            </p>
            <p>
                <a href="https://console.upyun.com/register/?invite=SJ0wu6g2-" target="_blank" rel="nofollow" sponsor="upyun">
                    <img src="./img/guoqi.png">
                </a>
                <a href="https://www.maoyuncloud.com/?from=layui" target="_blank" rel="nofollow" sponsor="maoyun">
                    <img src="./img/wuhan.png">
                </a>
            </p>
        </div>
</div>
</body>
<script>
    layui.use(['element','carousel'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var carousel = layui.carousel;
        //图片轮播
        carousel.render({
            elem: '#lunbo'
            ,width: '100%'
            ,height: '550px'
            ,interval: 2000
        });
    });
</script>
<style>
    .footer {
        padding: 30px 0;
        line-height: 30px;
        text-align: center;
        color: #666;
        font-weight: 300;
    }
    .site-union {
        color: #999;
    }
    .site-union a[sponsor] img {
        width: 80px;
    }
    legend {
        display: block;
        padding-inline-start: 2px;
        padding-inline-end: 2px;
        border-width: initial;
        border-style: none;
        border-color: initial;
        border-image: initial;
        font-size: 20px;
        font-weight: 300;
        text-align: center;
    }
    p{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0px;
    }
    .layui-card:last-child {
        margin-bottom: 15px;
    }
</style>
</html>